<template>
	<view class="uiwu uiwu-flex-column uiwu-flex-center">
		<view class="uiwu-form">
			<view class="item uiwu-flex-align">
				<image src="@/static/image/loginuser.png" mode="widthFix"></image>
				<input v-model="formData.phone" type="number" placeholder="请输入11位手机号码">
			</view>
			<view class="item uiwu-flex-align">
				<image src="@/static/image/loginpwd.png" mode="widthFix"></image>
				<input v-model="formData.code" type="number" placeholder="请输入短信验证码">
				<text @tap="getCode" class="qj-color-red w-2/6">{{ codeText }}</text>
			</view>
		</view>
		<view class="uiwu-button uiwu-flex-center" @tap="tapLogin(formData)">确定</view>
	</view>
</template>

<script setup lang="ts">
import { bindPhone, editPhone, sendVerify, uiwu } from '@/api/interface/interface';
import { onLoad } from '@dcloudio/uni-app';
import { ref, inject } from "vue";
interface FormData {
	phone: string;
	code: string;
}
const cache_key = ref(null)
const codeText = ref<string>('获取验证码');
const formData = ref<FormData>({
	phone: '',
	code: ''
})
onLoad((e) => {
	cache_key.value = e.cache_key || null
})
/**
 * getCode 获取短信验证码
 */
let t = null;//定时器
const isSendCode = ref<boolean>(true)//锁防止重复点击
const getCode = async (): Promise<any> => {
	if (!uiwu.validateInput(formData.value.phone, 'phone')) return
	if (!isSendCode.value) return
	isSendCode.value = false
	const result = await sendVerify({
		phone: formData.value.phone,
		type: 'login'
	})
	if (!result) return isSendCode.value = true
	uiwu.toast('验证码发送成功')
	let ts = 59
	codeText.value = `已发送${ts}s`
	t = setInterval(() => {
		if (ts == 0) {
			clearInterval(t)
			isSendCode.value = true
			codeText.value = '重新获取'
			return
		}
		ts--
		codeText.value = `已发送${ts}s`
	}, 1000)
}
/**
 * tapLogin 授权登录
 */
const tapLogin = async (e: object): Promise<any> => {
	if (!uiwu.validateInput(formData.value.phone, 'phone')) return
	if (!formData.value.code) return uiwu.toast('验证码不能为空')
	if (cache_key.value) {
		const result = await bindPhone({ ...e, cache_key: cache_key.value });
		handleResult(result)
		return
	} else {
		const result = await editPhone(e);
		if (!result) return
		uiwu.toast('修改成功')
		uni.navigateBack()
	}
}
const handleResult = ({ data: { token, userInfo: { is_first_login } } }) => {
	uni.setStorageSync('token', token)
	uiwu.toast('绑定成功')
	// socket.send(JSON.stringify({
	// 	type:'userRegister',
	// 	token:token
	// }))
	if (is_first_login) {
		uni.redirectTo({
			url: '/pages/login/invite'
		})
		return
	}
	setTimeout(() => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}, 400)
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F6F6F6;
}

.uiwu {
	padding: 20rpx 0;
}

.uiwu-form {
	width: 100vw;
	background: #FFFFFF;

	.item {
		width: 100%;
		height: 136rpx;
		padding: 0 24rpx;

		image {
			width: 44rpx;
			margin-right: 20rpx;
		}

		input {
			flex: 1;
			font-size: 28rpx;
		}

		text {
			font-size: 28rpx;
			font-weight: bold;

		}

		&:nth-child(1) {
			border-bottom: 1rpx solid #F1F1F1;
		}
	}
}

.uiwu-button {
	width: 670rpx;
	height: 80rpx;
	background: rgba(230, 0, 18, 1);
	border-radius: 40rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #FFFFFF;
	margin-top: 40rpx;
}
</style>